import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../providers/auth_provider.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('探索希腊'),
        backgroundColor: Colors.blue[700],
        foregroundColor: Colors.white,
        actions: [
          Consumer<AuthProvider>(
            builder: (context, authProvider, child) {
              return PopupMenuButton<String>(
                onSelected: (value) async {
                  if (value == 'profile') {
                    Navigator.pushNamed(context, '/profile');
                  } else if (value == 'logout') {
                    await authProvider.logout();
                    Navigator.pushReplacementNamed(context, '/login');
                  }
                },
                itemBuilder:
                    (context) => [
                      const PopupMenuItem(
                        value: 'profile',
                        child: Row(
                          children: [
                            Icon(Icons.person, size: 18),
                            SizedBox(width: 8),
                            Text('个人信息'),
                          ],
                        ),
                      ),
                      const PopupMenuItem(
                        value: 'logout',
                        child: Row(
                          children: [
                            Icon(Icons.logout, size: 18),
                            SizedBox(width: 8),
                            Text('退出登录'),
                          ],
                        ),
                      ),
                    ],
                child: const Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(Icons.account_circle, size: 32),
                ),
              );
            },
          ),
        ],
      ),
      body: Consumer<AuthProvider>(
        builder: (context, authProvider, child) {
          final user = authProvider.user;

          return SingleChildScrollView(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 欢迎信息
                Card(
                  elevation: 4,
                  child: Container(
                    width: double.infinity,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      gradient: LinearGradient(
                        colors: [Colors.blue[400]!, Colors.blue[600]!],
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                      ),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(20.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              Icon(
                                Icons.waving_hand,
                                color: Colors.white,
                                size: 28,
                              ),
                              const SizedBox(width: 12),
                              Expanded(
                                child: Text(
                                  '欢迎, ${user?.name ?? '用户'}!',
                                  style: const TextStyle(
                                    fontSize: 24,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.white,
                                  ),
                                ),
                              ),
                            ],
                          ),
                          const SizedBox(height: 8),
                          Text(
                            '开始您的希腊之旅',
                            style: const TextStyle(
                              fontSize: 16,
                              color: Colors.white70,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                const SizedBox(height: 24),

                // 主要功能区域
                Row(
                  children: [
                    Icon(Icons.explore, color: Colors.blue[700], size: 28),
                    const SizedBox(width: 12),
                    const Text(
                      '旅游服务',
                      style: TextStyle(
                        fontSize: 22,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 16),

                // 主要功能按键 - 4个一行
                Row(
                  children: [
                    Expanded(
                      child: _buildMainFeatureCard(
                        icon: Icons.group,
                        title: '攻略群',
                        subtitle: '实时交流有问必答',
                        color: Colors.orange,
                        onTap: () => _navigateToTourCategory(context, '攻略群'),
                      ),
                    ),
                    const SizedBox(width: 12),
                    Expanded(
                      child: _buildMainFeatureCard(
                        icon: Icons.location_city,
                        title: '当地游',
                        subtitle: '最地道的玩法体验',
                        color: Colors.purple,
                        onTap: () => _navigateToTourCategory(context, '当地游'),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 12),
                Row(
                  children: [
                    Expanded(
                      child: _buildMainFeatureCard(
                        icon: Icons.flight_takeoff,
                        title: '自由行',
                        subtitle: '旅行就要更自在',
                        color: Colors.red,
                        onTap: () => _navigateToTourCategory(context, '自由行'),
                      ),
                    ),
                    const SizedBox(width: 12),
                    Expanded(
                      child: _buildMainFeatureCard(
                        icon: Icons.groups,
                        title: '跟团游',
                        subtitle: '行程透明省心游',
                        color: Colors.indigo,
                        onTap: () => _navigateToTourCategory(context, '跟团游'),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 24),

                // 其他功能区域
                Row(
                  children: [
                    Icon(Icons.more_horiz, color: Colors.blue[700], size: 28),
                    const SizedBox(width: 12),
                    const Text(
                      '更多服务',
                      style: TextStyle(
                        fontSize: 22,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 16),

                // 其他功能网格
                GridView.count(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  crossAxisCount: 2,
                  crossAxisSpacing: 16,
                  mainAxisSpacing: 16,
                  childAspectRatio: 1.2,
                  children: [
                    _buildFeatureCard(
                      icon: Icons.location_on,
                      title: '目的地',
                      subtitle: '探索热门目的地',
                      color: Colors.blue,
                      onTap: () {
                        Navigator.pushNamed(context, '/destinations');
                      },
                    ),
                    _buildFeatureCard(
                      icon: Icons.hotel,
                      title: '酒店预订',
                      subtitle: '舒适的住宿体验',
                      color: Colors.green,
                      onTap: () {
                        Navigator.pushNamed(context, '/hotels');
                      },
                    ),
                    _buildFeatureCard(
                      icon: Icons.restaurant,
                      title: '美食推荐',
                      subtitle: '品尝地道美食',
                      color: Colors.orange,
                      onTap: () {
                        Navigator.pushNamed(context, '/food-recommendations');
                      },
                    ),
                    _buildFeatureCard(
                      icon: Icons.receipt_long,
                      title: '我的订单',
                      subtitle: '查看订单状态',
                      color: Colors.purple,
                      onTap: () {
                        Navigator.pushNamed(context, '/orders');
                      },
                    ),
                  ],
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  // 主要功能卡片 - 紧凑型
  Widget _buildMainFeatureCard({
    required IconData icon,
    required String title,
    required String subtitle,
    required Color color,
    required VoidCallback onTap,
  }) {
    return Card(
      elevation: 3,
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(8),
        child: Container(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                padding: const EdgeInsets.all(12),
                decoration: BoxDecoration(
                  color: color.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Icon(icon, size: 32, color: color),
              ),
              const SizedBox(height: 12),
              Text(
                title,
                style: const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                ),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 4),
              Text(
                subtitle,
                style: const TextStyle(fontSize: 12, color: Colors.grey),
                textAlign: TextAlign.center,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 普通功能卡片
  Widget _buildFeatureCard({
    required IconData icon,
    required String title,
    required String subtitle,
    required Color color,
    required VoidCallback onTap,
  }) {
    return Card(
      elevation: 4,
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(8),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(icon, size: 48, color: color),
              const SizedBox(height: 12),
              Text(
                title,
                style: const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                ),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 4),
              Text(
                subtitle,
                style: const TextStyle(fontSize: 12, color: Colors.grey),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 导航到旅游分类页面
  void _navigateToTourCategory(BuildContext context, String category) {
    Navigator.pushNamed(
      context,
      '/local-tours',
      arguments: {'category': category},
    );
  }
}
